<link href="/classico/public/assets/front-end/css/user/style.css" rel="stylesheet" type="text/css"/>
<div class="system-messages">
    <ul>
        <?php
        $messages = $this->messages;
        foreach ($messages as $message) :
            ?>
            <li><?= $message ?></li>
        <?php
        endforeach
        ?>
    </ul>
</div>
<div id="user-input-form">
    <div id="form-title">USER LOGIN</div>
    <div id="form-content">
        <form id="login-form" action="/classico/public/user/login" method="post">
            <table>
                <tr>
                    <td><label for="username">Username</label></td>
                    <td>
                        <input id="username" type="text" name="username"
                               value="<?= $this->username ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
                <tr>
                    <td><label for="password">Password</label></td>
                    <td>
                        <input id="password" type="password" name="password"
                               value="<?= $this->password ?>"/>
                    </td>
                    <td class="alerts"></td>
                </tr>
            </table>
            <input type="submit" name="isPost" value="Login"/>
        </form>
    </div>
</div>
<script type="text/javascript">
    var loginForm = $("#login-form");
    loginForm.submit(function () {
        var usernameTrAlertsTag = $('#username').parents('tr').find('.alerts');
        var passwordTrAlertsTag = $('#password').parents('tr').find('.alerts');

        usernameTrAlertsTag.html('');
        passwordTrAlertsTag.html('');

        var username = $('#username').val().trim();
        var password = $('#password').val();
        if (!username || !password) {
            if (!username) {
                usernameTrAlertsTag.append(
                    '<span class="alert">username must not be blank</span>'
                );
            }
            if (!password) {
                passwordTrAlertsTag.append(
                    '<span class="alert">password must not be blank</span>'
                );
            }

            return false;
        }

        return true;
    });
</script>